<template>
<div>
    <div class="homestayOverview">

        <div class="item" @click="navigatorTo(1)">
            <div class="left">
                <p>待确认订单</p>
                <p>{{info.undeterminedOrders||0}}</p>
            </div>
            <img src="~@/assets/img/hotelIndexIcon1.png" />
        </div>
        <div class="item" @click="navigatorTo(2)">
            <div class="left">
                <p>待入住订单</p>
                <p>{{info.beCheckinOrders||0}}</p>
            </div>
            <img src="~@/assets/img/hotelIndexIcon2.png" />
        </div>
        <!-- <div class="item">
            <div class="left">
                <p>待处理发票</p>
                <p>{{info.pendingInvoices||0}}</p>
            </div>
            <img src="~@/assets/img/hotelIndexIcon6.png" />
        </div> -->
        <div class="item" @click="navigatorTo(4)">
            <div class="left">
                <p>今日订单数</p>
                <p>{{info.todayOrders||0}}</p>
            </div>
            <img src="~@/assets/img/hotelIndexIcon3.png" />
        </div>
        <div class="item" @click="navigatorTo(4)">
            <div class="left">
                <p>今日订单总金额</p>
                <p>{{info.totalAmount||0}}</p>
            </div>
            <img src="~@/assets/img/hotelIndexIcon4.png" />
        </div>
        <div class="item" @click="navigatorTo(3)">
            <div class="left">
                <p>待支付订单</p>
                <p>{{info.unpaidOrders||0}}</p>
            </div>
            <img src="~@/assets/img/hotelIndexIcon5.png" />
        </div>
    </div>
    <div class="chart">
        <div class="item">
            <div class="top">
                <img src="~@/assets/img/hotelIndexIcon01.png" />
                <span>房型销售情况</span>
                <div class="time">
                    <i :class="time==0?'on':''" @click="time=0">日</i>
                    <i :class="time==1?'on':''" @click="time=1">周</i>
                    <i :class="time==2?'on':''" @click="time=2">月</i>
                </div>
            </div>
            <div class="bottom">
                <div class="left">
                    <div style="height:100%" ref="roomTypePie"></div>

                </div>
                <div class="right">
                    <el-table :data="roomTypeData2" style="width: 100%" v-if="roomTypeData2.length!=0" height="280px">
                        <el-table-column prop="shortName" header-align="center" align="center" label="">
                            <template slot-scope="scope">
                                <span class="pieColor" :style="{'background':colors[scope.$index]}"></span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="shortName" header-align="center" align="center" label="房型">
                        </el-table-column>
                        <el-table-column prop="salesVolume" header-align="center" align="center" label="售出间数">
                        </el-table-column>
                    </el-table>
                </div>
                <span class="empty" v-if="noData1">暂无数据</span>
            </div>
        </div>
        <div class="item">
            <div class="top">
                <img src="~@/assets/img/hotelIndexIcon02.png" />
                <span>入住率分析</span>

            </div>
            <div class="bottom">
                <div class="left" style="width:100%">
                    <div style="height:100%" ref="occupancyAnalysis">
                    </div>

                </div>
                 <span class="empty" v-if="noData2">暂无数据</span>
            </div>
           
        </div>
    </div>
    <!-- table -->
    <div class="tableBox">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="今日订单" name="first"></el-tab-pane>
            <el-tab-pane label="今日退房" name="second"></el-tab-pane>
            <el-tab-pane label="明日入住" name="third"></el-tab-pane>
            <el-tab-pane label="明日退房" name="fourth"></el-tab-pane>

        </el-tabs>
        <el-table :data="dataList" stripe style="width: 100%" v-if="dataList.length!=0" >
            <el-table-column prop="guestSourceName" header-align="center" align="center" label="来源">
            </el-table-column>
            <el-table-column prop="houseBaseName" header-align="center" align="center" label="房型">
            </el-table-column>
            <el-table-column prop="roomNumbers" header-align="center" align="center" label="房号">
            </el-table-column>
            <el-table-column prop="name" header-align="center" align="center" label="入离时间">
                <template slot-scope="scoped">
                    {{scoped.row.arriveDate}}</br>
                    {{scoped.row.leaveDate}}
                </template>
            </el-table-column>
            <el-table-column prop="num" header-align="center" align="center" label="房晚">
            </el-table-column>
            <el-table-column prop="guestName" header-align="center" align="center" label="姓名">
            </el-table-column>
            <el-table-column prop="guestPhone" header-align="center" align="center" label="手机号">
            </el-table-column>
            <el-table-column prop="orderAmount" header-align="center" align="center" label="房费">
            </el-table-column>
            <el-table-column prop="orderStatus" header-align="center" align="center" label="状态">
                <template slot-scope="scoped">
                    <span :style="{ color: roomStatusColor[scoped.row.orderStatus] }">{{scoped.row.orderStatus|delStatus}}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
                <template slot-scope="scoped">
                    <el-button type="text" size="small" @click="lookDetail(scoped.row.id)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
        </el-pagination>
    </div>
    <!-- 详情 -->
    <look-detail v-if="lookDetailVisible" ref="lookDetail" @refreshDataList="getDataList"></look-detail>
</div>
</template>

<script>
var that;
import * as echarts from "echarts";
import mixinViewModule from "@/mixins/view-module";
import lookDetail from "../hotelOrder/lookDetail";
export default {
  mixins: [mixinViewModule],
  components: {
    lookDetail,
  },
  watch: {
    time(newval, oldval) {
      if (newval != oldval) {
        this.getRoomType();
      }
    },
  },
  filters: {
    delStatus(val) {
      if (val) {
        let d = that.roomStatus.filter((item) => item.val == val);
        if (d.length != 0) {
          return d[0].label;
        }
      }
    },
  },
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/hotel/order/page",
        getDataListIsPage: true,
        createdIsNeed: false,
      },
      time: null,
      time2: 0,
      noData1: false,
      noData2: false,
      activeName: "first",
      colors: [
        "#0263FF",
        "#F3BB30",
        "#ED9433",
        "#EB6830",
        "#136EB2",
        "#EB5A49",
        "#029D55",
        "#00A399",
        "#8FBE4B",
        "#F7DE2C",
        "#3C97F2",
        "#EB5A49",
        "#44CC86",
        "#9BE2E8",
        "#FB9E02",
        "#6DC8EC",
        "#6E8CDE",
        "#FF7081",
      ],
      roomStatus: [
        {
          val: 4,
          label: "已取消",
        },
        {
          val: -1,
          label: "待确定",
        },
        {
          val: 1,
          label: "已预订",
        },
        {
          val: 2,
          label: "已入住",
        },
        {
          val: 3,
          label: "已退房",
        },
      ],
      roomStatusColor: {
        "-1": "#6faef1",
        1: "#f29130",
        2: "#67c23a",
        3: "#969799",
        4: "#AAA",
      },
      info: {
        beCheckinOrders: 0,
        todayOrders: 0,
        totalAmount: 0,
        undeterminedOrders: 0,
        unpaidOrders: 0,
      },
      statusArr: [
        {
          val: "",
          name: "今日订单",
          key: "arriveDate",
          date: 0,
        },
        {
          val: 2,
          name: "今日退房",
          key: "leaveDate",
          date: 0,
        },
        {
          val: 1,
          name: "明日入住",
          key: "arriveDate",
          date: 1,
        },
        {
          val: 2,
          name: "明日退房",
          key: " leaveDate",
          date: 1,
        },
      ],
      dataForm: {
        todayOrder: "",
      },
      roomTypeData: [],
       roomTypeData2: [],
    };
  },
  created() {
    that = this;
    this.handleClick({
      index: 0,
    });
    this.getInfo();
  },
  mounted() {
   // this.getRoomType();
    this.time = 0;
    this.getOccupancyAnalysis();
  },
  methods: {
    navigatorTo(type) {
      switch (type) {
        case 1:
          this.$router.push("hotelOrder-confirmedList");
          break;
        case 2:
          this.$router.push("/hotelOrder-paidList");
          break;
        case 3:
          this.$router.push("hotelOrder-unpaidList");
          break;
        case 4:
          this.$router.push("hotelOrder-list?state=all");
          break;
      }
    },
    handleClick(e) {
      let currentInd = e.index;
      //this.dataForm.orderStatus = this.statusArr[currentInd].val;
      this.dataForm.todayOrder = currentInd;
      //今天的日期
      // var today = new Date();
      // today.setTime(today.getTime());
      // let mon1 = today.getMonth() + 1;
      // let day1 = today.getDate();
      // var todayStr = today.getFullYear() + "-" + (mon1 < 9 ? '0' + mon1 : mon1) + "-" + (day1 < 9 ? '0' + day1 : day1);
      //明天的日期
      // var tomorrow = new Date();
      // tomorrow.setTime(tomorrow.getTime() + 24 * 60 * 60 * 1000);
      // let mon2 = tomorrow.getMonth() + 1;
      // let day2 = tomorrow.getDate();
      // var tomorrowStr = tomorrow.getFullYear() + "-" + (mon2 < 9 ? '0' + mon2 : mon2) + "-" + (day2 < 9 ? '0' + day2 : day2);
      // let date = "";
      // if (this.statusArr[currentInd].date == 0) {
      //     date = todayStr
      // } else {
      //     date = tomorrowStr
      // }
      // if (this.statusArr[currentInd].key == 'arriveDate') {
      //     this.dataForm.arriveDate = date;
      //     this.dataForm.leaveDate = "";
      // } else {
      //     this.dataForm.leaveDate = date;
      //     this.dataForm.arriveDate = "";
      // }
      this.getDataList();
    },
    bar(x, yData) {
      let myChart = echarts.init(this.$refs.occupancyAnalysis);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "12%",
          bottom: "3%",
          left: "4%",
          right: "4%",
          containLabel: true,
        },
        xAxis: {
          data: x || [],
        },
        yAxis: {
          name: "入住率(%)",
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: "#EAEDF1",
              width: 1,
              type: "dashed",
            },
            axisLabel: {
              interval: 0,
              rotate: 0,
              fontSize: 12,
              color: "#293C73",
            },
          },
        },
        series: {
          name: "入住率",
          type: "bar",
          barWidth: "20%",
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(84,115,232,1)",
              },
              {
                offset: 1,
                color: "rgba(24,144,255,0.6)",
              },
            ]),
          },
          label: {
            normal: {
              show: false,
              position: "top",
              fontSize: 12,
              color: "#293C73",
            },
          },
          data: yData || [],
        },
      };
      myChart.setOption(option);
    },
    pie(dataOrgin) {
      let myChart = echarts.init(this.$refs.roomTypePie);
      let data = dataOrgin.map((item) => {
        return {
          name: item.shortName,
          value: Math.floor(item.salesVolume * 1000) / 1000,
        };
      });
      const option = {
        animation: true,
        grid: {
          top: "3%",
          left: "10%",
          bottom: "3%",
          right: "12%",
        },
        tooltip: {
          show: true,
          backgroundColor: "#fff",
          borderColor: "#ddd",
          borderWidth: 1,
          formatter: (p) => {
            let txtCon =
              "<div style='text-align:left'>" +
              `<span style='color:${p.color}'>` +
              p.name +
              `</span><br /><span style=color:${p.color}> ` +
              p.percent +
              "%</span></div>";
            return txtCon;
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 28,
                background: "#e4ff00",
                with: "10",
              },
              b: {
                fontSize: 20,
                color: "#e4ff00",
                padding: [0, 0, 14, 0],
              },
              c: {
                fontSize: 20,
                color: "#fff",
                padding: [5, 0],
              },
            },
          },
        },
        series: {
          type: "pie",
          center: ["40%", "50%"],
          radius: ["50%", "70%"],
          data: data,
          itemStyle: {
            borderColor: "#ffffff",
            borderWidth: 3,
          },
          color: [
            "#0263FF",
            "#F3BB30",
            "#ED9433",
            "#EB6830",
            "#136EB2",
            "#EB5A49",
            "#029D55",
            "#00A399",
            "#8FBE4B",
            "#F7DE2C",
            "#3C97F2",
            "#EB5A49",
            "#44CC86",
            "#9BE2E8",
            "#FB9E02",
            "#6DC8EC",
            "#6E8CDE",
            "#FF7081",
          ],
          labelLine: {
            show: false,
          },
          label: {
            show: false,
            formatter: "{b}\n{d}%",
          },
        },
      };
      myChart.setOption(option);
    },
    getInfo() {
      this.$http
        .get(
          "/hotel/home/getHomestayOverview/" + this.$store.state.user.homestayId
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.info = res.data.data;
          }
        });
    },
    getRoomType() {
      this.$http
        .get("/hotel/home/getRoomSalesVolume", {
          params: {
            homestayId: this.$store.state.user.homestayId,
            queryType: this.time || 0,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.roomTypeData2 = res.data.data || [];
            this.pie(this.roomTypeData2);
            if (!res.data.data || res.data.data.length == 0) {
              this.noData1 = true;
            }
          }
        });
    },
    getOccupancyAnalysis() {
      this.$http
        .get(
          "/hotel/home/getOccupancyAnalysis/" +
            this.$store.state.user.homestayId
        )
        .then((res) => {
          if (res.data.code == 0) {
            //this.roomTypeData = res.data.data;
            let x = [],
              y = [];
            for (let i = 0; i < res.data.data.length; i++) {
              x.push(res.data.data[i].rentDate.substring(5));
              y.push(res.data.data[i].ratio);
            }
            this.bar(x, y);
            if (!res.data.data || res.data.data.length == 0) {
              this.noData2 = true;
            }
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.homestayOverview {
  display: grid;
  gap: 0 16px;
  grid-template-columns: auto auto auto auto 15.5% auto;

  .item {
    border-radius: 6px;

    display: flex;
    padding: 24px 24px 24px 32px;
    background-color: #fff;
    align-items: center;
    justify-content: space-between;

    // &:nth-child(5){
    //       max-width:95%;
    // }
    .left {
      p {
        margin: 0;

        &:first-child {
          font-size: 16px;
          color: #53628f;
          margin-bottom: 8px;
        }

        &:last-child {
          font-size: 32px;
          font-weight: bold;
          color: #293c73;
        }
      }
    }

    img {
      width: 56px;
      height: 56px;
    }
  }
}

.tableBox {
  border-radius: 6px;
  padding: 0 20px 20px;
  background-color: #fff;

  ::v-deep .el-tabs__item {
    font-size: 20px;
    font-family: Source Han Sans SC, Source Han Sans SC;
    color: #53628f;
    padding: 16px;
    height: auto;
    line-height: normal;

    &.is-active {
      font-weight: bold;
      color: #1372ff;
    }
  }
}

.chart {
  margin: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .item {
    width: calc(50% - 8px);
    background: #ffffff;
    border-radius: 6px;
    position: relative;

    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
      padding: 0 20px;
      border-bottom: 1px solid #eaedf1;

      img {
        width: 24px;
      }

      span {
        flex: 1;
        font-size: 20px;
        font-weight: bold;
        margin-left: 6px;
        color: #293c73;
      }

      .time {
        i {
          display: inline-block;
          width: 52px;
          height: 28px;
          background: #eaedf1;
          border-radius: 4px;
          font-style: inherit;
          text-align: center;
          line-height: 28px;
          color: #293c73;
          margin: 0 4px;

          &.on {
            background: #1372ff;
            color: #fff;
          }
        }
      }
    }

    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      position: relative;

      .left,
      .right {
        height: 300px;
        width: 49%;
      }
    }
  }
}

.empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pieColor {
  display: inline-block;
  width: 14px;
  height: 14px;
}
</style>
